<template>
  <div>
    <label v-if="label">{{label}}</label>
    <div>
      <slot></slot>
      <p v-if="valstatus=='error'" class="err">{{errmsg}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "zFormItem",
  inject: ["forms"],
  props: { label: { type: String }, prop: { type: String } },
  data() {
    return {
      errmsg: "",
      valstatus: ""
    };
  },
  created() {
    this.$bus.$on("zFormItem", value => {
      this.validate(value);
    });
    // this.getRulues();
  },
  methods: {
    getRulues() {
      let formRules = this.forms.rules[this.prop];
      return formRules;
    },
    // 校验
    validate(obj) {
      if (obj.name !== this.prop) {
        return;
      }
      const rule = this.getRulues();
      const value = this.forms.model[this.prop];
      console.log(rule, value);
      if (rule.required && !value) {
        this.errmsg = rule.message;
        this.valstatus = "error";
      } else {
        this.validateStatus = "validating";
      }
    }
  }
};
</script>
<style scoped>
.err {
  color: #f00;
}
</style>
